import React, { Component } from "react";
import { Icon, List, Input, Button } from "antd";
import { connect } from "dva";
import { routerRedux } from "dva/router";

import request from "utils/request";

@connect(({ global }) => ({}))
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      用户列表: [],
      发送内容: "",
      目标: "",
      消息列表: {}
    };
  }
  componentDidMount = () => {
    const _this = this;
    document.addEventListener("astilectron-ready", () => {
      window.astilectron.onMessage(message => {
        switch (message.name) {
          case "消息列表":
            _this.setState({ 消息列表: message.payload });
            console.log("get 消息列表", message.payload);
            break;
          default:
            break;
        }
      });
    });

    this.获取用户列表();
  };
  获取用户列表 = () => {
    request("用户/获取用户列表", {}, 用户列表 => {
      this.setState({ 用户列表 });
    });
  };
  发送文字 = () => {
    const { 发送内容, 目标 } = this.state;
    if (!目标) {
      // 发送给所有用户
      request("用户/发送给所有用户", { 发送内容 }, msg => {
        console.log("msg", msg);
      });
    } else {
      // 发送给目标用户
      window.astilectron.sendMessage(
        {
          name: "发送文字",
          payload: {
            目标,
            发送内容
          }
        },
        msg => {
          this.setState({ 发送内容: "" });
          console.log("msg", msg);
        }
      );
    }
  };
  render() {
    const { 用户列表, 发送内容, 目标, 消息列表 } = this.state;
    const { dispatch } = this.props;
    let 显示消息 = [];
    if (!目标) {
      for (let key in 消息列表) {
        显示消息 = 显示消息.concat(消息列表[key]);
      }
    } else {
      显示消息 = 消息列表[目标];
    }
    return (
      <div
        style={{
          display: "flex",
          height: "100%",
          padding: 16
        }}
      >
        <List
          header={
            <div>
              <Icon
                style={{ fontSize: 36 }}
                type="arrow-left"
                onClick={_ => {
                  dispatch(routerRedux.push("/"));
                }}
              />
              <Button
                type="primary"
                onClick={_ => dispatch({ type: "global/注销登录" })}
              >
                切换账户
              </Button>
            </div>
          }
          dataSource={用户列表}
          renderItem={用户 => {
            return <List.Item>{用户.name}</List.Item>;
          }}
          style={{
            width: 200,
            borderRight: "1px solid #d9d9d9",
            height: "100%"
          }}
        />
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          <List
            style={{ flex: 1 }}
            header={目标}
            dataSource={显示消息}
            renderItem={消息 => {
              return <List.Item>{消息}</List.Item>;
            }}
          />
          <Input.Search
            value={发送内容}
            enterButton="发送"
            onChange={e => {
              this.setState({ 发送内容: e.target.value });
            }}
            onSearch={this.发送文字}
          />
        </div>
      </div>
    );
  }
}

export default App;
